<!-- 搜索 -->
<template>
  <div class="wrap">
    <el-form v-model="searchform" ref="formRef" label-width="120px">
      <el-row>
        <div v-if="HS" style="font-size:14px;color:#2491fc;float: right;margin-bottom:10px;display:flex;">
          <div style="cursor: pointer;" @click="dataSelection">
            <span>商品国家选择</span>
            <i style="margin-left:5px;" class="el-icon-circle-plus-outline"></i>
          </div>
        </div>
        <el-col :xs="24" :sm="24" :lg="24">
          <el-row>
            <el-col v-for="(item, index) in formOptions" :xs="24" :sm="12" :md="8" :xl="item.col || 6"
              :key="newKeys[index]">
              <el-form-item :label="item.label ? (item.label + '：') : ''" :prop="item.prop"
                :label-width="item.labelWidth || '120px'" :rules="item.rules" :size="item.size || ''" class="h-search-margin">
                <!-- v-if="item.hidden === hidden" -->
                <el-col :xs="18" :sm="18" :md="18" :xl="18" v-if="item.label === 'HS编码'">
                  <formItem v-model="searchform[item.prop]" :itemOptions="item" @search="search()" />
                </el-col>
                <formItem v-model="searchform[item.prop]" :itemOptions="item" @search="search()" v-else />
                <el-col :xs="4" :sm="4" :md="4" :xl="4" v-if="item.label === 'HS编码'" style="margin-left: 10px;">
                  <el-button size="small" type="primary" @click="viewEncoding">查看编码</el-button>
                </el-col>
              </el-form-item>
            </el-col>

            <el-col :xs="btnColSpan.xs" :sm="btnColSpan.sm" :md="btnColSpan.md" :xl="btnColSpan.xl">
              <div class="btnItems h-search-margin">
                <el-button type="primary" size="small" icon="el-icon-search" class="btn-search"
                  @click="search()">搜索</el-button>
                <el-button type="info" size="small" icon="el-icon-refresh-right" class="btn-search"
                  @click="reset()">重置</el-button>
                <el-button v-for="(item, index) in btnItems" :key="index" :type="item.type || 'primary'"
                  :size="item.size || 'small'" :icon="item.icon || ''" class="btn-search"
                  @click="btnclick(item.clickEvent)">{{ item.label }}
                </el-button>
                <div>
                  <slot name="buttonContent"></slot>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        
        <div class="customButton">
          <slot></slot>
        </div>
      </el-row>
    </el-form>
    <!-- <div class="drawerbtn">
      <i class="el-icon-arrow-down"></i>
    </div> -->
  </div>
</template>

<script>
import formItem from './formItem.vue'
export default {
  data() {
    return {
      searchform: {}
    };
  },
  components: { formItem },
  props: {
    /**
      * 表单配置
      * 示例：
      * [{
      * label: '用户名', // label文字
      * col: '6', // 栅格占据的列数
      * prop: 'username', // 字段名
      * element: 'el-input', // 指定elementui组件
      * initValue: '阿黄', // 字段初始值
      * placeholder: '请输入用户名', // elementui组件属性
      * rules: [{ required: true, message: '必填项', trigger: 'blur' }], // elementui组件属性
      * events: { // elementui组件方法
      *  input (val) {
      *  console.log(val)
      *  },
      *  ...... // 可添加任意elementui组件支持的方法
      * }
      * ...... // 可添加任意elementui组件支持的属性
      * }]
    */
    formOptions: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    /**
      * 按钮配置
      * 示例：
      * [{
      * name: 'search', // 提交按钮项 search, export, reset
      * size: 'mini', // 尺寸 medium / small / mini
      * type: 'primary ', // 类型 primary / success / warning / danger / info / text
      * icon: 'el-input', // 图标类名
      * disabled: 'false', // 是否禁用状态
      * }]
    */
    btnItems: {
      type: Array,
      default() {
        return []
      }
    },
    // 海关选项
    HS: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    newKeys() {
      return this.formOptions.map(v => {
        // return tools.createUniqueString()
      })
    },
    btnColSpan () {
      const arr = this.formOptions || []
      const _length = arr.length

      const arrSpan = arr.reduce((total, item) => total + (parseInt(item.col) || 6), 0)
      const flag = 24 - arrSpan >= 6

      return {
        xs: 24,
        sm: _length < 2 ? 6 : 24,
        md: _length < 3 ? 6 : 24,
        xl: flag ? 6 : 24,
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.addInitValue()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() { },
  methods: {
    // 校验
    onValidate(callback) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          callback()
        }
      })
    },
    // 搜索
    search(item) {
      if (!this._debounceSearch) {
        this._debounceSearch = this.debounce((item) => {
          this.$emit('search', this.searchform);
        }, 300);
      }
      this._debounceSearch(item);
    },
    // 重置
    reset(item) {
      this.$emit('reset');
    },
    // 防抖工具函数
    debounce(fn, delay) {
      let timer = null;
      return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, args);
        }, delay);
      };
    },
    onExport() { },
    onReset() { },
    // 查看编码
    viewEncoding() {
      this.$emit('viewEncoding')
    },
    // 数据选择
    dataSelection() {
      this.$emit('dataSelection')
    },
    // 添加初始值
    addInitValue() {
      const obj = {}
      this.formOptions.forEach(v => {
        if (v.initValue !== undefined) {
          obj[v.prop] = v.initValue
        }
      })
      this.searchform = obj
    },
    btnclick(clickEvent) {
      this.$emit(clickEvent)
    }
  }
};
</script>
<style scoped lang='scss' scope>
/* @import url(); 引入css类 */
.wrap {
  position: relative;
  margin-bottom: 32px;

  .customButton {
    position: absolute;
    right: 10px;
    bottom: 0px;
  }

  .el-form {
    padding: 8px 16px;
    border: 1px solid #ebeef5;
  }

  .h-search-margin {
    margin-top: 11px;
    margin-bottom: 11px;
  }

  .drawerbtn {
    width: 100px;
    height: 20px;
    border-radius: 2px;
    margin: 0 auto;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ebeef5;
    transform: perspective(2em) rotateX(-20deg);

    &:hover {
      background: #f9fbfd;
    }
  }

  .btnItems {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
  }
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}</style>